<template>
  <div class="customTimerRadio">
    <ul>
      <li
        v-for="(item, index) in timeList"
        :key="index"
        :class="{ active: item.label === active }"
        :style="{
          'height':height,
          'line-height':height
        }"
        @click="changeTime(item)"
      >{{ item.label }}</li>
    </ul>
  </div>
</template>

<script>
import { parseTime, getQuickTimer } from '@/utils'
export default {
  props: {
    start: {
      type: String,
      default: ''
    },
    end: {
      type: String,
      default: ''
    },
    checkValue: {
      type: String,
      default: '近一周'
    },
    list: {
      type: Array,
      default: () => [{
        label: '近一周'
      }, {
        label: '近一月'
      }, {
        label: '近三月'
      }, {
        label: '近六月'
      }]
    },
    height: {
      type: String,
      default: '30px'
    }

  },
  data() {
    return {
      timeList: [],
      active: '近一周'
    }
  },
  watch: {
    checkValue(nv) {
      this.initTimes()
    },
    list(nv) {
      this.initTimes()
    }
  },
  mounted() {
    this.initTimes()
  },
  methods: {
    initTimes() {
      this.timeList = this.list
      this.active = this.checkValue
      this.emit()
    },
    changeTime(item) {
      this.active = item.label
      this.emit()
      this.$emit('change', { name: this.active })
    },
    emit() {
      this.$emit('update:start', parseTime(getQuickTimer(this.active).start, '{y}-{m}-{d}'))
      this.$emit('update:end', parseTime(getQuickTimer(this.active).end, '{y}-{m}-{d}'))
    }
  }
}
</script>

<style lang='scss'>
.customTimerRadio {
  width: 100%;
  height: auto;
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;

    li {
      flex: 1;
      font-size: 26px;
      color: #4f5a6d;
      text-align: center;
      border-radius: 50px;
      box-sizing: border-box;
      border: solid 1px #4aabff;
      transition: all 0.5s;
      margin-right: 20px;
      background-color: #fff;
      &:last-child{
        margin-right: 0;
      }
      &.active{
        border-color: #4aabff;
        background: #4aabff;
        color: #fff;
      }
    }
  }
}
</style>
